<template>
  <view class="container">
    <view id="detailsNonDynamicHeight">
      <u-navbar
        title="数据详情"
        :autoBack="true"
        bgColor="#5284c1"
        titleStyle="color:#fff"
        leftIconColor="#fff"
        :fixed="false"
      ></u-navbar>
      <view class="info">
        <view class="title">生产详情</view>
        <view class="info_box" v-if="type == 0">
          <view
            >工程名称：
            {{ productionDetail.projectName }}
          </view>
          <view
            >施工地点：
            {{ productionDetail.worksArea }}
          </view>
          <view
            >施工配比：
            {{ productionDetail.proportionConstrName }}
          </view>
          <view>浇筑部位：{{ productionDetail.pouringLocation }} </view>
          <view
            >出料时间：
            {{ productionDetail.dischargeTime }}
          </view>
          <view
            >实际方量：
            {{ productionDetail.actualVolume }}
          </view>
        </view>
        <view class="info_box" v-else-if="type == 1">
          <view
            >生产总重(吨)：
            {{ productionDetail.actualTotal }}
          </view>
          <view
            >配比名称：
            {{ productionDetail.proportionMixtureStabilizedName }}
          </view>
          <view
            >出料时间：
            {{ productionDetail.dischargeTime }}
          </view>
        </view>
        <view class="info_box" v-else-if="type == 2">
          <view
            >生产重量(kg)：
            {{ productionDetail.actualTotal }}
          </view>
          <view
            >配比名称：
            {{ productionDetail.proportionMixtureName }}
          </view>
          <view
            >施工地点：
            {{ productionDetail.worksArea }}
          </view>
          <view
            >出料时间：
            {{ productionDetail.dischargeTime }}
          </view>
        </view>
      </view>
    </view>
    <view class="content-warpper" :style="{ height: dynamicHeight }">
      <view class="table">
        <view class="title">材料详情</view>
        <view class="table_mian">
          <view class="th" v-if="type == 0">
            <view>材料名</view>
            <view>实际用量(kg)</view>
            <view>理论用量(kg)</view>
            <view>误差(%)</view>
          </view>
          <view class="th_5" v-else-if="type == 1">
            <view>材料名</view>
            <view>实际用量</view>
            <view>设定用量</view>
            <view>实际比例</view>
            <view>设定比例</view>
          </view>
          <view class="th" v-else-if="type == 2">
            <view>材料名</view>
            <view>实际值</view>
            <view>材料百分比</view>
            <view>生产配合比</view>
          </view>
          <!-- 循环数据 -->
          <template v-if="type == 0">
            <view
              class="th"
              v-for="(item, index) in cementList"
              :key="index"
              :class="item.isStandard ? 'red' : ''"
            >
              <view>{{ item.name }}</view>
              <view>{{ item.actual }}</view>
              <view>{{ item.theory }}</view>
              <view>{{ item.error }}</view>
            </view>
          </template>
          <template v-else-if="type == 1">
            <view
              class="th_5"
              v-for="(item, index) in stabilityList"
              :key="index"
              :class="item.isStandard ? 'red' : ''"
            >
              <view>{{ item.title }}</view>
              <view>{{ item.actual }}</view>
              <view>{{ item.theory }}</view>
              <view>{{ item.actualProportion }}</view>
              <view>{{ item.theoryProportion }}</view>
            </view>
          </template>
          <template v-else-if="type == 2">
            <view
              class="th"
              v-for="(item, index) in asphaltList"
              :key="index"
              :class="item.isStandard ? 'red' : ''"
            >
              <view>{{ item.title }}</view>
              <view>{{ item.actual }}</view>
              <view>{{ item.percentage }}</view>
              <view>{{ item.mix }}</view>
            </view>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getStabilityDetailApi } from '@/api/mixing-plant/stability'
import { getCementDetailApi } from '@/api/mixing-plant/cement'
import { getAsphaltDetailApi } from '@/api/mixing-plant/asphalt'
import { produceColumns, concreteColumns, asphaltColumns } from './util'
import dayjs from '@/utils'
export default {
  data() {
    return {
      sys: uni.$u.sys(),
      dynamicHeight: 0,
      // 0水泥 1水稳 2沥青
      type: 0,
      productionDetail: {},
      //水稳
      stabilityList: [],
      // 水泥
      cementList: [],
      // 沥青
      asphaltList: [],
      info: {}
    }
  },
  computed: {},
  onShow() {
    this.initPage()
  },
  async onLoad(options) {
    if (options) {
      this.type = options.type
      this.dataCode = options.item
      console.log(options.type)
      const methodEnum = {
        0: this.getCement, // 水泥
        1: this.getWaterStability, // 水稳
        2: this.getLiqing
      }
      methodEnum[this.type](this.info)
    }
  },
  methods: {
    initPage() {
      const thisObj = this
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this)
        query
          .select('#detailsNonDynamicHeight')
          .boundingClientRect((data) => {
            // let { this  } = thisObj;
            // #ifndef H5
            thisObj.dynamicHeight = this.sys.windowHeight - data.height + 'px'
            // #endif
            // #ifdef H5
            thisObj.dynamicHeight =
              this.sys.windowHeight -
              data.height +
              this.sys.safeAreaInsets.bottom -
              this.sys.safeAreaInsets.top +
              'px'
            // #endif
          })
          .exec()
      })
    },
    // 水稳
    async getWaterStability(id) {
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      try {
        this.stabilityList = uni.$u.deepClone(produceColumns)
        //   "dde648ef013a47c6bec99b6c5e5af37a" // 有超标的数据
        let res = await getStabilityDetailApi(this.dataCode)
        this.productionDetail = {
          actualTotal: res.actualTotal ?? '-',
          proportionMixtureStabilizedName:
            res.proportionMixtureStabilizedName ?? '-',
          dischargeTime:
            dayjs(res.dischargeTime).format('YYYY-MM-DD HH:mm:ss') ?? '-'
        }
        this.stabilityList.forEach((val) => {
          if (res.alarmMats.includes(val.dataIndex)) {
            val.isStandard = true
          }
          val.actual = res[val.dataIndex + 'Actual'] ?? '-'
          val.theory = res[val.dataIndex + 'Theory'] ?? '-'
          val.actualProportion = (
            res[val.dataIndex + 'Actual'] / res.theoreticalTotal
          ).toFixed(2)
          val.actualProportion =
            val.actualProportion == 'NaN' ? '-' : val.actualProportion
          val.theoryProportion = (
            res[val.dataIndex + 'Theory'] / res.theoreticalTotal
          ).toFixed(2)
          val.theoryProportion =
            val.theoryProportion == 'NaN' ? '-' : val.actualProportion
        })
        uni.hideLoading()
      } catch (error) {
        uni.hideLoading()
      }
    },
    // 水泥
    async getCement(id) {
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      this.cementList = uni.$u.deepClone(concreteColumns)
      // 9443bcfdec2e4dee97c553e1a60f33e4
      let res = await getCementDetailApi(this.dataCode)
      this.productionDetail = {
        projectName: res.projectName ?? '-',
        worksArea: res.worksArea ?? '-',
        proportionConstrName: res.proportionConstrName ?? '-',
        pouringLocation: res.pouringLocation ?? '-',
        dischargeTime:
          dayjs(res.dischargeTime).format('YYYY-MM-DD HH:mm:ss') ?? '-',
        actualVolume: res.actualVolume ?? '-'
      }
      this.cementList.forEach((val) => {
        if (res.alarmMats.includes(val.dataIndex)) {
          val.isStandard = true
        }
        val.actual = res[val.dataIndex + 'Actual'] ?? '-'
        val.theory = res[val.dataIndex + 'Theory'] ?? '-'
        // (实际用量-理论用量）/理论用量*100%=误差百分比
        val.error = (
          (((val.actual ?? 0) - (val.theory ?? 0)) / (val.theory ?? 0)) *
          100
        ).toFixed(2)
        val.error = val.error === 'NaN' ? '-' : val.error
      })
      uni.hideLoading()
    },
    // 沥青
    async getLiqing(id) {
      this.asphaltList = uni.$u.deepClone(asphaltColumns)
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      try {
        let res = await getAsphaltDetailApi({ dataCode: this.dataCode })
        this.productionDetail.actualTotal = res.actualTotal ?? '-'
        this.productionDetail.proportionMixtureName =
          res.proportionMixtureName ?? '-'
        this.productionDetail.worksArea = res.worksArea ?? '-'
        this.productionDetail.dischargeTime = res.dischargeTime ?? '-'
        this.asphaltList.forEach((val) => {
          if (res.alarmMats.includes(val.dataIndex)) {
            val.isStandard = true
          }
          val.actual = res[val.dataIndex]
          // 材料百分比
          if (
            val.dataIndex == 'temperature' ||
            val.dataIndex == 'oilStoneRatio' ||
            val.dataIndex == 'asphalt'
          ) {
            val.percentage = '-'
          } else {
            val.percentage = (
              ((res[val.dataIndex] ?? 0) /
                ((res.actualTotal ?? 0) - (res.asphalt ?? 0))) *
              100
            ).toFixed(2)
            val.percentage = val.percentage == 'NaN' ? '-' : val.percentage
          }

          val.mix = res.proportionMixtureProductionVo[val.dataIndex + 'Value']
            ? res.proportionMixtureProductionVo[val.dataIndex + 'Value']
            : '-'
        })
        uni.hideLoading()
      } catch (error) {
        uni.hideLoading()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.red {
  color: red;
}
.container {
  padding: 0px 0 40rpx;

  .content-warpper {
    overflow: auto;

    .table {
      padding: 20rpx 10px;
    }
  }

  .th_5 {
    font-size: 12px;
    display: flex;

    &:nth-child(odd) {
      background-color: #f2f2f2;
    }

    view {
      width: 20%;
      text-align: center;
      height: 80rpx;
      line-height: 80rpx;
      text-overflow: ellipsis;
      /* 溢出显示省略号 */
      overflow: hidden;
      /* 溢出隐藏 */
      white-space: nowrap;
      /* 强制不换行 */
    }
  }

  .title {
    color: #5284c1;
  }

  .info {
    padding: 30rpx 30rpx;
    background-color: #f4f4f4;

    .info_box {
      font-size: 12px;

      view {
        font-size: 12px;
        margin: 10rpx 0;
        width: 100%;
        text-overflow: ellipsis;
        /* 溢出显示省略号 */
        overflow: hidden;
        /* 溢出隐藏 */
        white-space: nowrap;
        /* 强制不换行 */
      }
    }
  }

  .table {
    // padding: 30rpx 30rpx;

    .table_mian {
      .th {
        &:nth-child(odd) {
          background-color: #f2f2f2;
        }

        font-size: 15px;
        display: flex;

        view:nth-child(2),
        view:nth-child(3) {
          width: 30%;
        }

        view:nth-child(1),
        view:nth-child(4) {
          width: 20%;
        }

        view {
          font-size: 12px;
          text-align: center;
          height: 80rpx;
          line-height: 80rpx;
          text-overflow: ellipsis;
          /* 溢出显示省略号 */
          overflow: hidden;
          /* 溢出隐藏 */
          white-space: nowrap;
          /* 强制不换行 */
        }
      }
    }
  }
}
</style>
